/**
 * @desc 赛事执行
 * @author yd_zhaorongjun
 */
<template>
  <div>
    <el-row class="edit_game_steps">
      <el-col :span="24">
        <el-steps class="stepBtn" :active="activeStep" align-center size="mini" :process-status="processStatus" finish-status="success">
          <el-step v-for="item in optList" :key="item.code" :name="item.code">
            <div slot="title">
              <span class="stepBtn_title" @click="clickStep(item.code)">{{ item.name }}</span>
            </div>
          </el-step>
        </el-steps>
      </el-col>
    </el-row>
    <div class="gl_py_20">
      <transition name="fade-transform" mode="out-in">
        <router-view :key="key" />
      </transition>
      <!-- 资格审核 -->
      <!-- <qualification v-show="activeStep === 0" ref="qualification" /> -->
      <!-- 选手称重 -->
      <!-- <players-weighing v-show="activeStep === 1" ref="playersWeighing" /> -->
      <!-- 场地设置 -->
      <!-- <site-setting v-show="activeStep === 2" ref="siteSetting" /> -->
      <!-- 赛事抽签 -->
      <!-- <game-draw v-show="activeStep === 3" ref="gameDraw" /> -->
      <!-- 单元设置 -->
      <!-- <unit-setting v-show="activeStep === 4" ref="unitSetting" /> -->
      <!-- 赛事编排 -->
      <!-- <game-layout v-show="activeStep === 5" ref="gameLayout" /> -->
      <!-- 赛事成绩 -->
      <!-- <game-result v-show="activeStep === 6" ref="gameResult" /> -->
    </div>
  </div>
</template>
<script>
// import { CopyData } from '@/lib';
// import qualification from './qualification';
// import playersWeighing from './playersWeighing';
// import siteSetting from './siteSetting';
// import gameDraw from './gameDraw';
// import unitSetting from './unitSetting';
// import gameLayout from './gameLayout';
// import gameResult from './gameResult';
export default {
  name: 'Execte',
  components: {
    // qualification,
    // playersWeighing,
    // siteSetting,
    // gameDraw,
    // unitSetting,
    // gameLayout,
    // gameResult
  },
  data() {
    return {
      activeStep: 0,
      activeName: '',
      optList: []
    };
  },
  computed: {
    key() {
      const $route = this.$route;
      let _path = null;
      if ($route.meta.animateKey) {
        _path = $route.meta.animateKey.split('/');
        _path = _path.map(item => {
          if (item.indexOf(':') > -1) {
            return $route.params[item.replace(':', '')];
          }
          return item;
        });
        _path = _path.join('/');
      }
      return _path || this.$route.path;
    },
    processStatus: function() {
      return 'finish';
    }
  },
  watch: {
    '$route': {
      handler: function(val, old) {
        this.init();
      }
    }
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      const $route = this.$route;
      const _optList = [
        {
          code: 'SubstationGameContent',
          name: '报表模板',
          icon: ''
        },
        {
          code: 'SubstationQualification',
          name: '资格审核',
          icon: ''
        },
        {
          code: 'SubstationPlayersWeighing',
          name: '选手称重',
          icon: ''
        },
        {
          code: 'SubstationSiteSetting',
          name: '场地设置',
          icon: ''
        },
        {
          code: 'SubstationCheckSetting',
          name: '检录设置',
          icon: ''
        },
        {
          code: 'SubstationGameDraw',
          name: '赛事抽签',
          icon: ''
        },
        {
          code: 'SubstationGameChapter',
          name: '赛事章节',
          icon: ''
        },
        {
          code: 'SubstationUnitSetting',
          name: '单元设置',
          icon: ''
        },
        {
          code: 'SubstationGameLayout',
          name: '赛事编排',
          icon: ''
        },
        {
          code: 'SubstationGameResult',
          name: '赛事成绩',
          icon: ''
        },
        {
          code: 'SubstationGameMedal',
          name: '奖牌榜',
          icon: ''
        }
      ];
      this.activeStep = $route.meta.activeStep;
      this.optList = _optList;
    },
    clickStep(val) {
      // this.activeStep = index;
      const { query } = this.$route;
      const name = val;
      this.$router.push({
        name: name,
        query: {
          gameName: query.gameName || ''
        }
      });
    }
  }
};
</script>
<style lang="scss">
  .stepBtn_title{
    cursor: pointer;
  }
</style>
